<template>
  <div class="Echarts">
    <div id="glScope" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import "echarts-gl";
import { defineComponent } from "vue-demi";

const data = [];
// Parametric curve
for (let t = 0; t < 25; t += 0.01) {
  const x = t;
  const y = Math.sin(t);

  data.push([x, y, 0]);
}
let t = 25;
console.log(data.length);
const option = {
  tooltip: {},
  backgroundColor: "#fff",
  visualMap: {
    show: false,
    dimension: 2,
    min: 0,
    max: 30,
    inRange: {
      color: [
        "#313695",
        "#4575b4",
        "#74add1",
        "#abd9e9",
        "#e0f3f8",
        "#ffffbf",
        "#fee090",
        "#fdae61",
        "#f46d43",
        "#d73027",
        "#a50026",
      ],
    },
  },
  xAxis3D: {
    type: "value",
  },
  yAxis3D: {
    type: "value",
  },
  zAxis3D: {
    name: "",
    type: "value",
    show: false,
    // axisLine: {
    //   show: false,
    // },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  grid3D: {
    viewControl: {
      projection: "orthographic",
      beta: 0,
      alpha: 90,
    },
  },
  series: [
    {
      type: "line3D",
      data: data,
      lineStyle: {
        width: 4,
      },
    },
  ],
};

export default defineComponent({
  name: "EchartsGLScope",
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(
        document.getElementById("glScope") as HTMLDivElement
      );
      myChart.setOption(option);
      window.setInterval(() => {
        const t0 = Date.now();
        option.series[0].data.push([t, Math.sin(t), 0]);
        t += 0.01;

        myChart.setOption(option);
        console.log(Date.now() - t0);
      }, 200);
    },
  },
  mounted() {
    this.myEcharts();
  },
});
</script>

<style>
</style>
